<script setup lang="js">
import { queryAllRoomByFloor } from '@/api/bedApi'
import { reactive } from 'vue'

// 设置楼层的相应数据
let room = reactive({
  roomFloor: '一楼'
})

// 获取所有的房间信息
let rooms = reactive([])

// 统计数量
let count = reactive({
  zcws: 0,
  kxcws: 0,
  yrcws: 0,
  wccws: 0
})

function queryAllBedInfo() {
  queryAllRoomByFloor({ 'floor': room.roomFloor })
    .then(res => {
      console.log(res)
      rooms = res.data.roomList
      count.zcws = res.data.zcw
      count.kxcws = res.data.kx
      count.yrcws = res.data.yr
      count.wccws = res.data.cw
    })
}

// 调用方法
queryAllBedInfo()

function btn_fun() {
  queryAllBedInfo()
}
</script>

<template>
  <!-- 显示标题 -->
  <div style="margin-left: 70px;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">床位管理</el-breadcrumb-item>
      <el-breadcrumb-item>床位示意图</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 内容区 -->
  <div class="main">
    <!-- 搜索区域 -->
    <div class="query">
      <table class="query-table">
        <tr>
          <td>
            <div class="query-form">
              <el-form :inline="true">
                <el-form-item label="楼层：">
                  <el-select v-model="room.roomFloor" @change="btn_fun" placeholder="请选择楼层" style="width: 120px;">
                    <el-option label="一楼" value="一楼"></el-option>
                    <el-option label="二楼" value="二楼"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </td>
          <td style="width: 120px;">
            <div>
              <img src="@/assets/img/bed/all.png" />
              <span class="pic-text">总床数：</span>{{ count.zcws }}
            </div>
          </td>
          <td style="width: 120px;">
            <div>
              <img src="@/assets/img/bed/kx.png" />
              <span class="pic-text">空闲：</span>{{ count.kxcws }}
            </div>
          </td>
          <td style="width: 120px;">
            <div>
              <img src="@/assets/img/bed/yr.png" />
              <span class="pic-text">有人：</span>{{ count.yrcws }}
            </div>
          </td>
          <td style="width: 120px;">
            <div>
              <img src="@/assets/img/bed/wc.png" />
              <span class="pic-text">外出：</span>{{ count.wccws }}
            </div>
          </td>
        </tr>
      </table>
    </div>

    <!-- 床位显示区域 -->
    <div class="map">
      <table border="1px" cellspacing="20px" style="border-collapse: collapse; width: 1200px ;margin-top: 30px;">
        <tbody>
          <tr class="cwsyt_thead">
            <td v-for="(item, index) in rooms" :key="item.roomNo" v-show="index < 1">{{ item.roomNo }}</td>
            <td class="room_id" rowspan="2" style="background-color: #AEEEEE">电梯厅</td>
            <td class="room_id" rowspan="2" colspan="2" style="background-color: #9AC0CD">洗衣房</td>
            <td class="room_id" rowspan="2" colspan="2" style="background-color: #4EEE94">活动中心</td>
            <td v-for="(item, index) in rooms" :key="item.roomNo" v-show="index > 0 && index < 4">{{ item.roomNo }}</td>
            <td class="room_id" rowspan="2" style="background-color: #CDAA7D">走道</td>
            <td v-for="(item, index) in rooms" :key="item.roomNo" v-show="index >= 4 && index < 6">{{ item.roomNo }}</td>
          </tr>
          <tr class="cwsyt_tbody">
            <td v-for="(item, index) in rooms" :key="item.roomNo" v-show="index < 6 ">
              <a href="javascript:void(0)" v-for="bedItem in item.bedList" :key="bedItem.bedNo">
                <div>
                  <img v-if="bedItem.bedStatus == 1" src="@/assets/img/bed/kx.png" />
                  <img v-if="bedItem.bedStatus == 2" src="@/assets/img/bed/yr.png" />
                  <img v-if="bedItem.bedStatus == 3" src="@/assets/img/bed/wc.png" />
                </div>
                {{ bedItem.bedNo }}
              </a>
            </td>
          </tr>
          <tr></tr>
          <tr class="cwsyt_thead">
            <td v-for="(item, index) in rooms" :key="item.roomNo" v-show="index >= 6">{{ item.roomNo }}</td>
          </tr>
          <tr class="cwsyt_tbody">
            <td v-for="(item, index) in rooms" :key="item.roomNo" v-show="index >= 6 ">
              <a href="javascript:void(0)" v-for="bedItem in item.bedList" :key="bedItem.bedNo">
                <div>
                  <img v-if="bedItem.bedStatus == 1" src="@/assets/img/bed/kx.png" />
                  <img v-if="bedItem.bedStatus == 2" src="@/assets/img/bed/yr.png" />
                  <img v-if="bedItem.bedStatus == 3" src="@/assets/img/bed/wc.png" />
                </div>
                {{ bedItem.bedNo }}
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<style lang="css" scoped>
.main{
  margin-top: 5px;
}
.main .query {
  height: 60px;
  margin-left: 70px;
}

.main .query .query-table {
  height: 60px;
}

.main .query .query-table .query-form {
  margin-top: 12px;
}

.main .query .query-table img {
  width: 25px;
  height: 13px;
}

.main .query .query-table .pic-text {
  margin-left: 5px;
  margin-right: 5px;
  font-weight: 700;
}

.main .map {
  margin-top: 3px;
  margin-left: 70px;
}

.main .map .cwsyt_thead {
  background-color: #0168b7;
  color: white;
  text-align: center;
}

.main .map .cwsyt_tbody {
  height: 140px;
  text-align: center;
}

.main .map .cwsyt_tbody div {
  width: 50px;
  margin-top: 5px;
}

.main .map .cwsyt_tbody div > img {
  width: 100%;
  height: 100%;
  margin-left: 35%;
}

.main .map table > tbody > tr > td {
  border: 1px solid #ddd;
}
</style>

